<div ng-controller="ExplorationFeedback">
  <md-card class="oppia-editor-card">
    <div ng-if="!currentThreadId">
      <div class="pull-right">
        {% if user_email %}
          <button class="btn btn-success pull-right" ng-click="showCreateThreadModal()" style="margin-top: 10px;">
            Start new thread
          </button>
        {% endif %}
      </div>

      <div style="clear: both;"></div>
      <br>

      <div ng-if="threads.length === 0">
        <em>No feedback has been given for this exploration yet.</em>
      </div>
      <table class="table">
        <tr ng-if="threads.length > 0">
          <th class="col-lg-1 col-md-1 col-sm-1">
            Status
          </th>
          <th class="col-lg-6 col-md-6 col-sm-6">
            Subject
          </th>
          <th class="col-lg-3 col-md-3 col-sm-3">
            Original author
          </th>
          <th class="col-lg-2 col-md-2 col-sm-2">
            Last updated
          </th>
        </tr>
        <tr ng-repeat="t in threads|orderBy:'-last_updated'" ng-click="setCurrentThread(t.thread_id)" class="oppia-feedback-tab-row">
          <td class="col-lg-1 col-md-1 col-sm-1">
            <span ng-class="getLabelClass(t.status)"><[getHumanReadableStatus(t.status)]></span>
          </td>
          <td class="col-lg-6 col-md-6 col-sm-6">
            <div><[t.subject]></div>
            <div><[t.summary]></div>
          </td>
          <td class="col-lg-3 col-md-3 col-sm-3">
            <span ng-if="t.original_author_username"><[t.original_author_username]></span>
          </td>
          <td class="col-lg-2 col-md-2 col-sm-2">
            <span><[getLocaleAbbreviatedDatetimeString(t.last_updated)]></span>
          </td>
          <td class="col-lg-2 col-md-2 col-sm-2">
          </td>
        </tr>
      </table>

      {% if not user_email %}
        <em>To create a new feedback thread, please log in.</em>
      {% endif %}
    </div>

    <div ng-if="currentThreadId">
      <br>
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
          <span class="oppia-back-arrow">
            <button type="button" class="btn btn-default btn-xs" ng-click="setCurrentThread(null)">
              <span class="glyphicon glyphicon-chevron-left" title="Return to list of feedback threads">
              </span>
            </button>
          </span>
          <span style="font-size: larger">Feedback Thread: <[currentThreadData.subject]></span>

        </div>

        <div style="float: right;" class="col-lg-2 col-md-2 col-sm-2">
          <div class="pull-right">
            <span ng-if="currentThreadData.state_name" class="label label-info">
              state: <[currentThreadData.state_name]>
            </span>
            <span ng-class="getLabelClass(currentThreadData.status)">
              <[getHumanReadableStatus(currentThreadData.status)]>
            </span>
          </div>
        </div>
      </div>

      <div ng-if="currentThreadMessages">
        <div class="row">
          <div style="margin-top: 10px;" class="col-lg-12 col-md-12 col-sm-12">
            <table class="table">
              <tr ng-repeat="m in currentThreadMessages|orderBy:'message_id'">
                <td>
                  <div class="row">
                    <div class="col-lg-5 col-md-5 col-sm-5">
                      <span ng-if="$index !== 0">
                        #<[m.message_id]>
                      </span>
                      <span ng-if="m.author_username">
                        by <strong><[m.author_username]></strong>
                      </span>
                      <span ng-if="!m.author_username">
                        (anonymously submitted)
                      </span>
                    </div>

                    <div class="col-lg-4 col-md-4 col-sm-4">
                      <span ng-if="m.message_id !== 0">
                        <span ng-if="m.updated_status">
                          <em>Status changed to '<[getHumanReadableStatus(m.updated_status)]>'</em>
                        </span>
                        <span ng-if="m.updated_subject">
                          <em>Subject changed to '<[m.updated_subject]>'</em>
                        </span>
                      </span>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-3">
                      <span><[getLocaleAbbreviatedDatetimeString(m.created_on)]></span>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                      <div style="white-space: pre-wrap;"><[m.text]></div>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>

        <hr>

        {% if user_email %}
          <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
              <label for="newMessageText">Add new message <span ng-if="editabilityService.isEditable()">(and/or change status)</span></label>
              <textarea class="form-control" ng-model="$parent.$parent.$parent.newMessageText" id="newMessageText" rows="6"></textarea>
              <br>
              <span ng-show="editabilityService.isEditable()">
                Change status (optional):
                <select ng-model="updatedStatus" ng-options="choice.id as choice.text for choice in STATUS_CHOICES"></select>
              </span>
              <br>
              <button style="margin-top: 10px;" class="btn btn-success" ng-click="addMessage(currentThreadId, $parent.$parent.$parent.newMessageText, updatedStatus)" ng-disabled="messageSendingInProgress || !$parent.$parent.$parent.newMessageText">
                <span ng-if="messageSendingInProgress">Sending...</span>
                <span ng-if="!messageSendingInProgress">Send</span>
              </button>
            </div>
          </div>
        {% else %}
          <em>To respond to a feedback thread, please log in.</em>
        {% endif %}
      </div>
    </div>
  </md-card>
</div>

<script type="text/ng-template" id="modals/editorFeedbackCreateThread">
  <div class="modal-header">
    <h3>Start New Feedback Thread</h3>
  </div>

  <div class="modal-body">
    <p>Thread subject: <input type="text" ng-model="newThreadSubject"></p>
    <p>Message text <textarea ng-model="newThreadText" rows="6"></textarea></p>
  </div>

  <div class="modal-footer">
    <button class="btn btn-success" ng-click="create(newThreadSubject, newThreadText)" ng-disabled="!newThreadSubject || !newThreadText">Create Thread</button>
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
  </div>
</script>
